<template>
  <view>
    <uni-popup ref="tipPopup" :mask-click="true" :safe-area="false">
      <view class="pop">
		<view class="close-pop" @tap="closePop">
			<uni-icons type="closeempty" size="25"></uni-icons>
		</view>
        <image class="logo" src="../../static/images/logo.jpg" mode=""></image>
		<view class="title">登录智函名片</view>
		<view class="desc">登录开始探索更多精彩内容吧!</view>
		<button class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键登录</button>
      </view>
    </uni-popup>
	<uni-popup ref="popup" type="dialog">
		<uni-popup-dialog :duration="2000" title="服务提醒" :showClose="false" :before-close="true" @close="close" @confirm="confirm">
			<view class="dialog">
				<view class="title">为了更好的浏览体验，需要获取您的头像和昵称</view>
				<view class="info-wrapper">
					<view class="avatar-wrapper">
						<image v-if="avatarUrl" class="avatar" :src="avatarUrl" mode="aspectFit"></image>
						<uni-icons v-else type="contact-filled" color="#999" size="80"></uni-icons>
						<view v-if="!avatarUrl" class="text">一键获取</view>
						<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></button>
					</view>
					<view class="input-wrapper">
						<text>昵称：</text>
						<text v-if="nickname">{{nickname}}</text>
						<view v-if="!nickname" class="text">一键获取</view>
						<input type="nickname" v-model="nickname"/>
					</view>
				</view>
			</view>
		</uni-popup-dialog>
	</uni-popup>
  </view>
</template>

<script>
import http from '@/utils/http.js'
export default {
  data() {
    return {
      codester: '',
	  avatarUrl: '',
	  nickname: '',
	  encryptedData: ''
    };
  },
  onShow() {
    uni.login({
      success: async (res) => {
		  debugger
        this.codester = res.code;
      },
    });
  },
  methods: {
	closePop() {
		this.$refs.tipPopup.close()
	},
	onChooseAvatar(e) {
		const { avatarUrl } = e.detail 
		console.log(avatarUrl)
		this.avatarUrl = avatarUrl
	},
	upload(filePath, cb) {
		const fileName = filePath.split('/').pop()
		uni.uploadFile({
		      url: `https://ywtmp.hnwytkj.com/app-api/infra/file/upload?path=${fileName}`, //仅为示例，非真实的接口地址
		      filePath,
		      name: 'file',
		      // formData: {},
		      success: (uploadFileRes) => {
				const res = JSON.parse(uploadFileRes.data)
		        console.log(uploadFileRes.data);
				if (res.code === 0) {
					this.avatar = res.data
					if (cb) cb()
				}
		      },
			  fail: (res) => {
				console.log(res)
			  }
		    });
	},
	confirm() {
		this.upload(this.avatarUrl, () => {
			http({
				url: 'card/user-profile/personal/update',
				method: 'put',
				data: {
					...this.userProfileDO,
					avatar: this.avatar,
					nickname: this.nickname
				}
			}).then(res => {				
				if(res.code === 0) {
					this.$refs.popup.close()
					this.$emit('success')
				}
			})
		})		
	},
    getPhoneNumber(e) {
    	const {
    	  detail: { encryptedData, iv, code },
    	} = e;
    	//这里需要使用自己封装的接口 loginByWechat
    	http({
    		url: 'member/auth/weixin-mini-app-login',
    		method: 'post',
    		data: {
    			phoneCode: code,
    			loginCode: this.codester,
    			state: 'mp',
				encryptedData: this.encryptedData // || '0419bd7cfc03589e47c9875f51929b74'
    		}
    	}).then(res => {
    		console.log(res, '微信一键登录返回的数据');
    		if (res.code === 0) {
    			this.$refs.tipPopup.close()
    			uni.setStorageSync('token', res.data.accessToken);
				uni.setStorageSync('refreshToken', res.data.refreshToken);
    			uni.setStorageSync('userId', res.data.userId)
				http({
					url: 'card/user-profile/get'
				}).then(res => {				
					if(res.code === 0) {
						this.userProfileDO = res.data.userProfileDO
						if (!res.data.userProfileDO.avatar) {
							this.$refs.popup.open()
						} else {
							this.$emit('success')
						}
					}
				})
    		}
    	});
    },
    open(encryptedData) {
		this.encryptedData = encryptedData || getApp().globalData.encryptedData
		uni.login({
			success: (res) => {
			  this.codester = res.code;
			},
		});
		this.$refs.tipPopup.open("bottom");
    }
  },
};
</script>

<style lang="scss" scoped>
.pop {
  width: 750rpx;
  height: 748rpx;
  background: #FFFFFF;
  border-radius: 30rpx 30rpx 0px 0px;
  padding-top: 60rpx;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  .close-pop {
	position: absolute;
	top: 15px;
	right: 15px;
  }
  .logo {
	width: 140rpx;
	height: 140rpx;	
  }
  .title {
	font-family: Source Han Sans CN;
	font-weight: 500;
	font-size: 36rpx;
	color: #000000;
	margin: 50rpx 0 30rpx;
  }
  .desc {
	font-family: Source Han Sans CN;
	font-weight: 300;
	font-size: 30rpx;
	color: #000000;
	margin-bottom: 50rpx;
  }
  .btn {
	width: 500rpx;
	height: 80rpx;
	line-height: 80rpx;
	background: #4C73FF;
	border-radius: 40rpx;
	text-align: center;
	font-family: Source Han Sans CN;
	font-weight: 300;
	font-size: 30rpx;
	color: #FFFFFF;
  }
}
.dialog {
	.title {
		color: #333;
		font-size: 24rpx;
	}
	.info-wrapper {
		.avatar-wrapper {
			width: 160rpx;
			height: 160rpx;
			position: relative;
			// overflow: hidden;
			margin: 0 auto;
			color: #666;
			// border-radius: 50%;
			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				margin-top: 10rpx;
			}
			.text {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				line-height: 160rpx;
				text-align: center;
				color: #007aff;
				font-size: 26rpx;
			}
			button {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				opacity: 0;
			}
		}
		.input-wrapper {
			font-size: 24rpx;
			color: #666;
			position: relative;
			background-color: #f7f7f7;
			padding: 20rpx;
			.text {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				line-height: 72rpx;
				text-align: center;
				color: #007aff;
				font-size: 26rpx;
			}
			input {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				opacity: 0;
			}
		}
	}
}
</style>
